<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>personRegist</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<style>
      #personRegistInfo{
        background:url(../../image/main/info@2x.png) no-repeat center;
        background-size: 100% 100%;
      }
      .login-input {
          text-indent: 5px;

        }
        .aui-list{
              background-color:rgba(255, 255, 255, 0);
        }
        .aui-list .aui-list-item{
          letter-spacing: 2px;
          margin: 0 0 0px 28px;
          height: 56px;
          line-height: 56px;
          font-size: 17px;
          padding-left: 0;
           background-image: -webkit-linear-gradient(90deg,rgba(221, 221, 221, 0),rgba(221, 221, 221, 0) 50%,transparent 50%);
           background-image: linear-gradient(90deg,rgba(221, 221, 221, 0),rgba(221, 221, 221, 0) 50%,transparent 50%);
        }
        .aui-list .aui-list-item:first-child,
        .aui-list .aui-list-item:last-child{
          height: 79px;
        }
        @media screen and (-webkit-min-device-pixel-ratio: 1.5){
          .aui-list {
              background-image:linear-gradient(90deg,rgba(221, 221, 221, 0),rgba(221, 221, 221, 0) 50%,transparent 50%);
          }
        }
        .loginOpert .creatOrforget{
          padding: 0.2rem 0;
        }
        .loginOpert .creatOrforget:first-child{
          text-align: left;
          padding-left: 29px;
        }
        .loginOpert .creatOrforget:last-child{
          text-align: right;
          padding-right: 29px;
        }
        .getVilidCode{
          float: right;
          text-align: right;
          font-size: 17px;
          color:rgb(19, 18, 18) !important;
          background-color: rgba(255, 255,255, 0)!important;
          padding-right: 0;
        }
        .login-input{
          font-size: 17px;
        }
        .aui-list.aui-form-list {
          border-top:none!important;
        }
        .rightArrow {
          float: right;
          width: 8px;
          height: 15px;
          margin: 6px 0 0 5px;
        }
        .rightPic{
          width: 55px;
          height: 55px;
          float: right;
          margin-top: -15px;
        }
        .rightPic img{
          width: 55px;
          height: 55px;
          border-radius: 50%;
        }
        .rightCheck{
          width: 55px;
          height: 55px;
          font-size: 15px;
          padding-left: 5px;
          text-align: center;
          line-height: 55px;
          margin-top: -15px;
          float: right;
          position: relative;
          z-index: 1;
          text-indent: 0;
          margin-right: 10px;
         }
         .registFav{
           margin-left: 28px;
         }
         .registFav h2{
           font-size: 16px;
           letter-spacing: 2px;
         }
         .registFav ul{
           height: auto;
           display: flex;
           flex-wrap: wrap;
           margin-top: 10px;
         }
         .registFav li{
           float: left;
           padding-right: 21px;
           font-size: 16px;
           color: #969696;
           letter-spacing: 2px;
           line-height: 32px;
         }
         .rightCheck input{
           width: 55px;
           height: 55px;
           position: absolute;
           left: 0;
           top: 0;
           z-index: 5;
           background-color: rgba(255, 255, 255, 0);
           border: none;
         }

         .aui-margin-r-15{
           margin-right: 23px !important;
         }
         .niColor{
           color: #000!important;
         }
         .deleteBtn{
            display: inline-block;
            width: 11px;
            height: 11px;
            margin-left: -10px;
         }
         /*适配屏幕320px*/
         @media (max-width: 320px){
            .aui-list .aui-list-item,
            .getVilidCode,
            .rightCheck,
             .registFav h2,
             .registFav li,
             .exsit{
              font-size: 12px;
            }
            .aui-list .aui-list-item{
              height: 37px;
              line-height: 37px;
            }
            .aui-list .aui-list-item:first-child,
            .aui-list .aui-list-item:last-child {
              height: 57px;
              line-height: 57px;
            }
            .rightPic img ,.rightPic{
                width: 37px;
                height: 37px;
            }
            .rightPic {
                margin-top: -5px;
            }
            .rightArrow {
                width: 5px;
                height: 10px;
                margin: 10px 0 0 5px;
            }
            .rightCheck {
                width: 38px;
                height: 38px;
                line-height: 38px;
                margin-right: 6px;
                margin-top: -5px;
            }
            .rightCheck input {
                width: 38px;
                height: 38px;
            }
            .registFav li {
                line-height: 24px;
            }
            .deleteBtn{
              margin-left: -6px;
              margin-bottom: -1px
            }
       	}
         /*适配屏幕320px*/
	</style>
</head>
<body>
  <div id="personRegistInfo" v-bind:style="{height:wHeight}">
    <section class="aui-content aui-margin-t-15">
        <ul class="aui-list aui-form-list ">
            <li class="aui-list-item" v-on:click="selectUserPic()">
              <div class="aui-list-item-label color-orange">
                  头像
              </div>
                <div class="aui-list-item-label aui-margin-r-15" style="width: 8rem;padding-right: 0;">
                    <div class="aui-btn  getVilidCode" style="width: 8rem;">
                      <img src="../../image/getin@2x.png" class="rightArrow"/>
                      <div  class="rightPic"><img :src="upLoadPic"/></div>

                    </div>
                </div>
            </li>
            <li class="aui-list-item" v-on:click="editUserNiname()">
              <div class="aui-list-item-label  color-orange">
                  昵称
              </div>
                <div class="aui-list-item-label aui-margin-r-15" style="width: 8rem;padding-right: 0;">
                    <div class="aui-btn  getVilidCode" style="width: 8rem;" v-bind:class="{niColor:black}">
                      {{palcehoderNi}}
                       <img src="../../image/getin@2x.png" class="rightArrow"/>
                    </div>
                </div>
            </li>
        </ul>
    </section>
    <section class="aui-content-padded registFav">
      <h2>感兴趣的活动</h2>
      <ul>
         <li v-for="(interestItem,index) in interestList" v-bind:class="{niColor:interestItem.status == true }" v-if="index = tagIndex">
           {{interestItem.interest}}
           <img src="../../image/main/deleteBtn@2x.png" class="deleteBtn" @click="delateTag(index)">
         </li>
         <li  @click="addTag()" class="niColor">
           点击添加
         </li>
      </ul>
    </section>
  </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/fastclick.js"></script>
<script type="text/javascript">
    apiready = function(){
        api.parseTapmode();
        app.init();
          //////获取用户昵称
        api.addEventListener({
            name: 'personRegistInfo'
        }, function(ret, err) {
            app.palcehoderNi = ret.value.NiName;////编辑昵称页面传来昵称
            app.black = ret.value.staut;/////编辑昵称页面传来状态
        });
          //////获取兴趣标签
        api.addEventListener({
            name: 'addTag'
        }, function(ret, err) {
            app.addTagValue = ret.value.tagValue;////添加兴趣页面传来
            app.upInstrstListArr.push(app.addTagValue);////
            app.instrstListArr.push({interest:app.addTagValue});
            app.interestList = app.instrstListArr;///兴趣标签
        });
          //////提交编辑用户资料
        api.addEventListener({
            name: 'subUserInfo'
        }, function(ret, err) {
            infoMethod.subUserInfoMethod();
        });
    };
    // 去掉iOS的点击延时问题
    window.addEventListener('load', function() {
        FastClick.attach(document.body);
    }, false);
    var userInfotokenData = $api.getStorage('userInfo');
    ////初始化页面
    var app = new Vue({
        el: '#personRegistInfo',
        data: {
            wHeight: '',
            upLoadPic : '',/////需要提交得图片路径
            palcehoderNi : '',/////用户昵称
            addTagValue : '',
            black : false,
            tagIndex : '0',
            interestList : [
              // {interest:'有团队',status:false},{interest:'钢琴弹奏',status:false},{interest:'吉他弹奏',status:false},{interest:'活动礼仪',status:false},
              // {interest:'活动主持',status:false},{interest:'活动策划',status:false},{interest:'古筝演奏',status:false},{interest:'小提琴演奏',status:false}
            ],
            instrstListArr : [],///输入的兴趣
            upInstrstListArr : [],////要提交的兴趣列表
            imgToken : '',////获取得上传图片token
        },
        methods: {
            init: function() {
              /////初始化页面高度
                var wh = document.documentElement.clientHeight || document.body.clientHeight;
                    this.wHeight = (wh-20) + 'px';
                var userInfo = $api.getStorage('userInfo');
                var str = userInfo.interest_tag.split(",");
                    app.palcehoderNi = userInfo.nickname;///昵称
                    app.upLoadPic = userInfo.avatar;///图像
                    for(var i = 0; i < str.length; i++){
                        app.instrstListArr.push({interest:str[i]});
                        app.interestList = app.instrstListArr;///兴趣标签
                        app.upInstrstListArr.push(str[i]);
                    }
                    // app.upIntrestList = str.join(',');
                    // if(app.upIntrestList == ''){
                    //
                    // }
            },
            //////点击修改头像弹出底部菜单
            selectUserPic : function(){
              infoMethod.getToken();
              api.actionSheet({
                title: '',
                cancelTitle: '取消',
                destructiveTitle: '',
                buttons: ['从相册中选取', '拍照']
              }, function(ret, err) {
                var index = ret.buttonIndex;
                if(index == 1){
                   infoMethod.gotoLogin_checkPic();
                }else if(index == 2){
                   infoMethod.gotoLogin_takePhoto();
                }
              });
            },
            //////点击修改昵称
            editUserNiname : function(){
                   bf_common_view.bf_win.openWin('main_resetName', './');
            },
            //////删除已有的兴趣标签
            delateTag : function(index){
                this.interestList.splice(index, 1);//////删除显示的兴趣
                this.upInstrstListArr.splice(index, 1);////删除要提交得兴趣
            },
            addTag : function(){
                api.openFrame({
                    name: 'addIntrestTag_frame',
                    url: './addIntrestTag_frame.html',
                    rect: {
                        x: 0,
                        y: 0,
                        w: 'auto',
                        h: 'auto'
                    },
                    animation: {
                       type:"movein",
                       subType:"from_bottom",
                       duration:200
                    }
                });
            }
        },
        mounted:function(){
        }
    });

    var imgCp = "";
    var infoMethod = {
        subUserInfoMethod : function(){
             console.log(userInfotokenData.usertype+','+app.upLoadPic+','+app.palcehoderNi+','+app.upInstrstListArr)
            $c.ajax({
                url: 'User/save',
                method:'post',
                values:{
                    usertype : userInfotokenData.usertype,
                    nickname : app.palcehoderNi,
                    avatar : app.upLoadPic,
                    interest_tag : app.upInstrstListArr.join(',')
                },
                need_login : true ,
                success: function(ret) {
                  if(ret) {
                    api.sendEvent({
                         name: 'setUserInfo',
                         extra: {
                             UserInfo: ret
                         }
                    });
                    bf_common_view.bf_win.popToast("提交成功!");
                    setTimeout(function(){
                       api.closeWin();
                    },800)
                    //console.log(JSON.stringify(ret));
                  }
                },
                err:function(err){
                 console.log(JSON.stringify(err));
                }
            });
        },
        gotoLogin_checkPic : function(){
           api.getPicture({
               sourceType: 'library',
               mediaValue: 'pic',
               destinationType: 'url',
               allowEdit: true,
               quality: 50,
               targetWidth: 200,
               targetHeight: 300,
               saveToPhotoAlbum: false
           }, function(ret, err) {
               if (ret) {
               app.upLoadPic = ret.data;
               infoMethod.changeImg();
               }
           });
        },
        gotoLogin_takePhoto : function(){
          api.getPicture({
              sourceType: 'camera',
              mediaValue: 'pic',
              destinationType: 'url',
              allowEdit: true,
              quality: 50,
              targetWidth: 100,
              targetHeight: 100,
              saveToPhotoAlbum: false
          }, function(ret, err) {
              if (ret) {
                  app.upLoadPic = ret.data;
                  infoMethod.changeImg();
              }
          });
        },
        ///获取文件上传token
        getToken : function(){
          $c.ajax({
              url: 'File/uploadToken',
              method:'get',
              need_login : true ,
              success: function(ret) {
                if(ret) {
                  app.imgToken = ret.uptoken;
                  //// console.log(ret.uptoken);
                }
              },
              err:function(err){
               console.log(JSON.stringify(err) + "err");
              }
          });
        },
       ///////将图片转为base64
        changeImg: function() {
          var trans = api.require('trans');
          trans.decodeImgToBase64({
            imgPath: app.upLoadPic
          }, function(ret, err) {
            if (ret.status) {
                imgCp = ret.base64Str;
                infoMethod.upImg();
            } else {
                alert(JSON.stringify(err));
            }
          });
        },
        ////////上传图片到七牛，获得图片地址
       upImg : function(){
         var idx = imgCp.indexOf("base64,");
         if (idx != -1) {
            imgCp = imgCp.substring(idx+7);
         }
         var num = fileSize(imgCp);
         var pic = imgCp;
         var url = "http://up-na0.qiniup.com/putb64/-1/"; //非华东空间需要根据注意事项 1 修改上传域名
         var xhr = new XMLHttpRequest();
         xhr.onreadystatechange=function(){
           if (xhr.readyState==4){
               var ret = xhr.responseText;
               var idx1 = ret.indexOf("http");
               var idx2 = ret.indexOf('"}');
               var val = ret.substring(idx1, idx2);
               val = val.replace(/[\'\"\\\\]/g, '');
               //val的值就是图片的网址
               console.log(val);
               app.upLoadPic = val;
           }
         }
         xhr.open("POST", url, true);
         xhr.setRequestHeader("Content-Type", "application/octet-stream");
         xhr.setRequestHeader("Authorization", "UpToken " + app.imgToken);
         xhr.send(pic);
       	}
    }
    /////获得图片大小
    function fileSize(str) {
  	    var fileSize;
  	    //找到等号，把等号也去掉
  	    if (str.indexOf('=') > 0) {
  	       var indexOf = str.indexOf('=');
  	       str = str.substring(0, indexOf);//把末尾的’=‘号去掉
  	     }
  	    fileSize = parseInt(str.length - (str.length / 8) * 2);
  	    return fileSize;
  	}
</script>
</html>
